<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      height="100%"
      class="table-container"
      highlight-current-row
    >
      <el-table-column
        fixed
        label="ID"
        width="80"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.$index +1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="用户名"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column
        label="手机号"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.mobile }}
        </template>
      </el-table-column>
      <el-table-column
        label="邮箱"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column>

      <el-table-column
        label="注册时间"
        width="160"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="del(scope)"
            >
              删除
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import { get_users as getUsers, remove_user } from '@/api/role'
import Pagination from '@/components/Pagination/index'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      list: [],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        created_at: undefined,
        status: undefined,
        keyword: undefined
      },
      roles_id: ''
    }
  },
  created() {
    this.roles_id = this.$route.query.role_id
    this.fetchData()
  },
  methods: {
    fetchData() {
      const obj = { role_id: this.roles_id }
      getUsers(obj).then(response => {
        this.list = response.data.list
        this.total = response.data.total_count
        this.listLoading = false
      })
    },
    del(scope) {
      this.$confirm('确认删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const obj = {
          user_id: scope.row.id,
          role_id: this.roles_id
        }
        remove_user(obj).then(response => {
          setTimeout(() => {
            this.list.splice(scope.$index, 1)
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          }, 300)
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
